<!DOCTYPE html>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<svg>
  <defs>
    <rect x="0" y="0" width="100" height="40" id="target" fill="green" />
    <rect x="100" y="0" width="100" height="40" id="expected" fill="red" />
    <use xlink:href="#target" id="use"/>
  </defs>

  <use y="50" xlink:href="#expected"/>
  <use y="100" xlink:href="#expected"/>

  <use y="50" xlink:href="#target"/>
  <use y="100" xlink:href="#use"/>
</svg>
<script>
runAfterLayoutAndPaint(function() {
  for (var i = 0; i < 5; ++i)
    target.animate([
      {'x': '20px', composite: 'add'},
      {'x': '20px', composite: 'add'}
    ], {fill: 'forwards'}).persist();
}, true);
</script>
